<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;"
          >在线客服</view
        >
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size:38rpx;"></view>
      </view>
    </cloudHeader>
    <view class="gbody main">
      <view class="content">
        <view
          class="content-box"
          @touchstart="touchstart"
          id="content-box"
          :class="{ 'content-showfn': showFunBtn }"
        >
          <!-- 背景图- 定位方式 -->
          <image
            class="content-box-bg"
            :src="chatBgImg"
            :style="{ height: imgHeight }"
          ></image>
          <view class="content-box-isloading" v-if="!isloading">
            <graceLoading :loadingType="1" textColor="#ffffff"></graceLoading>
          </view>
          <view
            class="message"
            v-for="(item, index) in messageList"
            :key="index"
            :id="`msg-${item.cid}`"
          >
            <view class="showtime" v-if="item.showtime">
              {{ item.showtime }}
            </view>
            <view class="message-item " :class="item.isItMe ? 'right' : 'left'">
              <image
                class="img"
                :src="baseUrl + item.fromUserHeadImg"
                mode=""
              ></image>
              <!-- contentType = 1 文本 -->
              <view class="content" v-if="item.contentType == 1">
                {{ item.content }}
              </view>
              <!-- contentType = 2 语音 -->
              <view
                class="content contentType2"
                :class="[{ 'content-type-right': item.isItMe }]"
                v-if="item.contentType == 2"
                @tap="handleAudio(item)"
                hover-class="contentType2-hover-class"
                :style="{ width: `${130 + item.contentDuration * 2}rpx` }"
              >
                <view
                  class="voice_icon"
                  :class="[
                    { voice_icon_right: item.isItMe },
                    { voice_icon_left: !item.isItMe },
                    { voice_icon_right_an: item.anmitionPlay && item.isItMe },
                    { voice_icon_left_an: item.anmitionPlay && !item.isItMe }
                  ]"
                ></view>
                <view class="">{{ item.contentDuration }}''</view>
              </view>
              <!-- contentType = 3 图片 -->
              <view
                class="content contentType3"
                v-if="item.contentType == 3"
                @tap="viewImg([baseUrl + item.content])"
              >
                <image
                  :src="baseUrl + item.content"
                  class="img"
                  mode="widthFix"
                ></image>
              </view>
              <!-- contentType = 4 文件 -->
              <view
                class="content contentType4"
                v-if="item.contentType == 4">
                 <text
                   class="grace-grids-icon grace-icons iconwenjian"
                 ></text>
                 <p>{{item.name}}</p>
              </view>
              <view v-html="item.content" v-if="item.status=='first'"></view>
            </view>
          </view>
        </view>
        <!-- 底部聊天输入框 -->
        <view
          class="input-box"
          :class="{ 'input-box-mpInputMargin': mpInputMargin }"
        >
          <view class="input-box-flex">
            <!-- #ifndef H5 -->
            <image
              v-if="chatType === 'voice'"
              class="icon_img"
              :src="require('@/static/chat/voice.png')"
              @click="switchChatType('keyboard')"
            ></image>
            <image
              v-if="chatType === 'keyboard'"
              class="icon_img"
              :src="require('@/static/chat/keyboard.png')"
              @click="switchChatType('voice')"
            ></image>
            <!-- #endif -->
            <view class="input-box-flex-grow">
              <input
                v-if="chatType === 'voice'"
                type="text"
                class="content"
                id="input"
                v-model="formData.content"
                :hold-keyboard="true"
                :confirm-type="'send'"
                :confirm-hold="true"
                placeholder-style="color:#DDDDDD;"
                :cursor-spacing="10"
                @confirm="sendMsg(2)"
              />
              <view
                class="voice_title"
                v-if="chatType === 'keyboard'"
                :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }"
                @touchstart.stop.prevent="startVoice"
                @touchmove.stop.prevent="moveVoice"
                @touchend.stop="endVoice"
                @touchcancel.stop="cancelVoice"
              >
                {{ voiceTitle }}
              </view>
            </view>

            <!-- 功能性按钮 -->
            <image
              class=" icon_btn_add"
              :src="require('@/static/chat/add.png')"
              @tap="switchFun"
            ></image>

            <!-- #ifdef H5 -->
            <button
              class="btn"
              type="primary"
              size="mini"
              @touchend.prevent="sendMsg(1)"
            >
              发送
            </button>
            <!-- #endif -->
          </view>

          <view class="fun-box" :class="{ 'show-fun-box': showFunBtn }">
            <view class="grace-grids">
              <view
                class="grace-grids-items"
                v-for="(item, index) in funList"
                :key="index"
                @tap.stop="clickGrid(index)"
              >
                <text
                  class="grace-grids-icon grace-icons"
                  :class="item.icon"
                ></text>
                <view class="grace-grids-text">{{ item.title }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- //语音动画 -->
        <view class="voice_an" v-if="recording">
          <view class="voice_an_icon">
            <view id="one" class="wave"></view>
            <view id="two" class="wave"></view>
            <view id="three" class="wave"></view>
            <view id="four" class="wave"></view>
            <view id="five" class="wave"></view>
            <view id="six" class="wave"></view>
            <view id="seven" class="wave"></view>
          </view>
          <view class="text">{{ voiceIconText }}</view>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script src="./index.js"></script>

<style scoped>
@import "./index.css";
</style>
